<script setup>

    import { ref,onMounted } from 'vue'

    import { useRouter } from 'vue-router'

    import { userStore } from '@/store/user.js'

    import axios from 'axios'

    const router = useRouter();
    const userItemStore = userStore();

    const avatarUrl= ref("");

    const gotoLogin = ()=>{
        router.push("/login")
    }
    const gotoHome = ()=>{
        router.push("/")
    }

    const gotoUserCenter = ()=>{
        router.push("/center")
    }

    const goToCart = ()=>{
        router.push("/cart")
    }

    const goToOrders = ()=>{
        router.push("/order")
    }

    const gotoRegister = ()=>{
        router.push("/register")
    }

    //判断是否登录
    const isLogged = ()=>{
        console.log("执行了判断是否登录....")
        //判断是否登录
        axios.get("/user/isLogged").then(resp=>{
            console.log(resp.data);

            //更新 pinia
            userItemStore.updateUser(resp.data);
            userItemStore.updateLoginStatus(true);
        })
    }

    const logout=()=>{
        //发送请求
        axios.get("/user/logout").then(resp=>{
            // ==   值的判断 (内容判断)
            // === 类型 + 值的判断 判断
            if (resp.status == 200){
                //清理
                localStorage.removeItem("token");
                userItemStore.updateUser(null);
                userItemStore.updateLoginStatus(false);

                //跳转
                router.push("/")
            }
        })
    }
    onMounted(()=>{

        avatarUrl.value = "https://img2.baidu.com/it/u=292339375,2266731160&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800";
        isLogged();

    })

</script>

<template>
    <!-- 顶部 -->
    <div>
        <el-row class="banner">
            <!-- 左边的logo -->
            <el-col :span="7">
                <img src="../assets/logo.png" alt="蜗牛书城">
            </el-col>
            <!--  搜索文本框和按钮 -->
            <el-col :span="7">
                <el-input size="small" placeholder="搜索关键字" clearable style="width: 250px;"></el-input>
                <el-button size="small" type="primary" icon="el-icon-search">搜索</el-button>
            </el-col>
            <el-col :span="10" style="text-align: right">
                <el-button-group>
                    <!-- 登录后才显示 -->
                    <template v-if="userItemStore.loggedIn">
                        <div style="margin-right: 10px;" @click="gotoUserCenter">
                            <el-avatar :src="avatarUrl" size="small" style="margin-right: 8px;">
                            </el-avatar>
                        </div>
                        <el-button type="plain" size="small"><el-icon><User /></el-icon>个人信息：{{userItemStore.user.account}}</el-button>
                        <el-button type="primary"
                                   @click="goToCart"
                                   size="small"><el-icon :size="18"><ShoppingCart /></el-icon>
                            购物车</el-button>
                        <el-button type="primary" size="small"><el-icon :size="18"><Star /></el-icon>我的收藏</el-button>
                        <el-button type="primary" size="small" @click="goToOrders">
                            <el-icon :size="18"><Goods /></el-icon>
                            我的订单
                        </el-button>
                        <el-button type="primary" size="small" @click="logout">
                            <el-icon :size="18"><Bicycle /></el-icon>
                            退出
                        </el-button>
                    </template>

                    <!-- 没有登录才显示  -->
                    <template v-else>
                        <el-button type="primary" size="small"  @click="gotoLogin">
                            <el-icon :size="18"><User /></el-icon>
                             登录
                            </el-button>
                        <el-button type="primary" size="small" @click="gotoRegister">
                            <el-icon :size="18"><UserFilled /></el-icon>
                              注册
                            </el-button>
                    </template>
                    <el-button type="primary" size="small" @click="gotoHome">
                        <el-icon :size="18"><HomeFilled /></el-icon>
                        主页
                        </el-button>
                </el-button-group>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>

</script>

<style scoped>
    .banner {
        display: flex;
        justify-content: center;
        /* 底部对齐 */
        align-items: flex-end;
        padding: 5px;
        top: 0;
        left: 0;
        width: 100%;
        /* 左上角到右下角 */
        background: linear-gradient(to bottom right, #a9dff4, #688df4, #eef2ce);
    }
</style>